<template>
    <div class="personal">
        <div class="header">
            <div @click="go">⬅</div>
            <h2>个人信息</h2>
            <div>
            </div>
        </div>
        <ul>
            <li @click="change(0)">
                <span>头像</span>
                <span>
                    <img :src="info.avatar" alt />
                </span>
            </li>
            <li @click="onShowProp('nickname')">
                <span>昵称</span>
                <span>
                    {{info.nickname}}
                </span>
            </li>
            <li @click="onShowProp('mobile')">
                <span>手机号</span>
                <span>{{info.mobile}}</span>
            </li>
            <li @click="onShowProp('sex')">
                <span>性别</span>
                <span>{{info.sex}}</span>
            </li>
            <li @click="change(1)">
                <span>出生日期</span>
                <span>{{info.birthday}}</span>
            </li>
            <li @click="ShowProp">
                <span>所在城市</span>
                <span>{{info.province_name}}</span>
            </li>
            <li @click="onShowProp('subjects')">
                <span>学科</span>
                <span>{{info.subjectNames}}</span>
            </li>
        </ul>

        <van-popup v-model="show" position="bottom" >
            <ol v-if="type == 0">
                <li class="a" @click="a(0)">拍照</li>
                <li class="a" @click="a(1)">
                    <van-uploader :after-read="after">从手机相册选择</van-uploader>
                </li>
                <li class="a" @click="a(2)">取消</li>
            </ol>
              <!-- 日期 -->
            <van-datetime-picker
            v-if="type == 1"
            v-model="currentDate"
            type="date"
            @confirm="confirm"
            @cancel="cancel"
            :min-date="minDate"
            :max-date="maxDate"
            />
        </van-popup>

        <!-- 三级联动 -->
           


    </div>
</template>

<script>
    import { Userinfo } from "../../api/index"
    import { Uploader } from 'vant';
    import { Popup } from 'vant';
    import { DatetimePicker } from 'vant';
    import Axios from "axios"
    import { Img,Imgnew,Time } from "../../api/index"
  
    export default {
        name: 'Personal',
        data() {
            return {
                info: {},
                show:false,
                type:0,
                minDate: new Date(1970, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentDate: new Date(),
            }
        },
        components:{
           [Popup.name]:Popup,
           [Uploader.name]:Uploader,
           [DatetimePicker.name]:DatetimePicker
        },
        mounted() {
            this.getinfo();
        },
        methods: {
            //城市三级联动
            ShowProp(){
              
            },
            getinfo() {
                Userinfo().then(res => {
                    console.log(res)
                    this.info = res.data
                })
                    .catch(err => {
                        console.log(err)
                    })
            },
            go() {
                window.history.go(-1)
            },
            change(type){
                console.log(type)
                this.type=type;
                 this.show=true
            },
            //上传图片
            after(file){
               console.log(file)
               var form=new FormData();
               form.append("file",file.file);
               console.log(form)
            //    Axios.post("https://test.365msmk.com/api/app/public/img",form)//取到照片
               Img(form).then(res=>{
                   console.log(res)
                //    Axios.put("https://test.365msmk.com/api/app/user",{avatar:res.data.data.path})//再次请求，上传的新的图                
                    Imgnew({avatar:res.data.path})
                    .then(res=>{
                       console.log(res.data)
                       this.getinfo();//重新调用
                       this.show=false
                   })
               })
            },
            //选择时间--取消
            cancel(){
              this.show=false
            },
            confirm(value){
                console.log(value)
                //转换时间格式
                let date=new Date(value)
                let time=`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
                console.log(time)
                //把新时间渲染
                
                // Axios.put("https://test.365msmk.com/api/app/user",{birthday:time})
                Time({birthday:time}).then(res=>{
                    console.log(res)
                    this.getinfo();//重新调用
                    this.show=false
                })
            },
            //拍照-相册选择-取消
            a(key){
              switch (key) {
                  case 0:
                      alert("设备不支持")
                      this.show=false
                      break;

                      case 1:
                      break;

                      case 2:
                      this.show=false
                      break;

                  default:
                      break;
              }
            },
            onShowProp(v, d) {
                //   console.log(v,d)
                switch (v) {
                    case "nickname":
                        this.$router.push({
                            path: "/setinfo",
                            query: {
                                tag: v,
                                value: this.info.nickname
                            }
                        });
                        break;
                    case "avatar":
                        // this.showPopup = true;
                        // this.changeTag = v;
                        break;
                    case "sex":
                        this.$router.push({
                            path: "/setinfo",
                            query: {
                                tag: v,
                                value: this.info.sex
                            }
                        });
                        break;
                    case "birthday":
                        // this.showPopup = true;
                        // this.changeTag = v;
                        break;
                    case "address":
                        // this.showPopup = true;
                        // this.changeTag = v;
                        break;
                    case "attrs":
                        // this.showPopup = true;
                        // this.changeTag = v;
                        // this.attrsColums = d.value;
                        // this.attrsSelectIdx = d.selectIdx;
                        break;
                    // case "subjects":
                    //     this.$router.push({
                    //         path: "/setinfo",
                    //         query: {
                    //             tag: v,
                    //             // value: val,
                    //             select: this.userInfo.subjects
                    //         }
                    //     });
                        // var val;
                        // this.attrs.forEach(res => {
                        //     if (res.id == 2) {
                        //         val =value;
                        //     }
                        // });
                        // console.log(val);
                        // this.$router.push({
                        //     path: "/setinfo",
                        //     query: {
                        //         tag: v,
                        //         value: val,
                        //         select: this.info.subjects
                        //     }
                        // });
                        // break;
                    default:
                        break;
                }
            }
        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .personal {
        background: #eee;
    }

    .header {
        height: 50px;
        width: 100%;
        background: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    ul {
        height: 480px;
        width: 100%;
        background: white;
        padding: 5px;
        box-sizing: border-box;
        margin-top: 20px;
    }

    ul>li {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    span {
        display: inline-block;
        line-height: 60px;
    }

    img {
        width: 30px;
        display: inline-block;
        line-height: 60px;
    }
    ol>li{
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #eee;
    }
    .a{
       text-align: center;
    }
</style>